import React, { useState } from 'react'
import { Form, Input, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { login as actionLogin } from './redux';
import { useDispatch } from 'react-redux';
import type { ILoginParams } from './index.d';
import './index.scss';

const Login: React.FC = () => {
  const [form] = Form.useForm();
  const dispatch = useDispatch();
  // 初始化登录loading状态 默认为false
  const [loading, setLoading] = useState<boolean>(false);

  // 登录
  async function login(params: ILoginParams) {
    try {
      setLoading(true);
      await dispatch(actionLogin(params))
    } catch { }
    setLoading(false);
  }

  return (
    <div className="login__wrap">
      <div className="login-box">
        <div className="login-left">
          <img src={require('@/assets/images/login-left.png')} alt="区域级平台" />
        </div>
        <div className="content">
          <h5>账号登录</h5>
          <div className="form__wrap">
            <Form onFinish={login} form={form}>
              <Form.Item name="account" rules={[{ required: true, message: '请输入用户名' }]}>
                <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
              </Form.Item>
              <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
                <Input.Password prefix={<LockOutlined className="site-form-item-icon" />} placeholder="请输入密码" />
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  block
                  loading={loading}
                  style={{ borderRadius: '20px', marginTop: '20px' }}
                  size="large"
                >登录</Button>
              </Form.Item>
            </Form>
          </div>
          {/* <p className="edition">Copyright©2021 哈工创想技术部出品</p> */}
        </div>
      </div>
    </div>
  )
}

export default Login;
